<template>
	<view class="c-userlist">
		<view class="c-userlist-search">
			<icon type="search" size="14"></icon>
			<input type="text" v-model="key" class="c-userlist-search-txt" placeholder="搜索" />
		</view>
		<view class="c-userlist-tip"></view>
		<view class="c-userlist-body">
			<view class="c-userlist-body-box" @click="onGetUserName(item)" v-for="(item, index) in fltItems" :key="index">
				<text>{{item.UserName}}</text>
			</view>
			<view class="c-userlist-body-box" v-show="fltItems==0">
				<text>没有找到相关用户！</text>
			</view>
		</view>
	</view>
</template>

<script>
	let pageApp = getApp();
	export default {
		data() {
			return {
				items: [],
				key: "",
				source: ""
			}
		},
		onLoad: function(options) {
			this.getUserInfo();
			this.source = options.source;
		},
		computed: {
			fltItems() {
				var _key = this.key;
				if (_key) {
					//不区分大小写处理
					var reg = new RegExp(_key, 'ig')
					return this.items.filter(item => {
						return item.UserName.match(reg)
					})
				};
				return this.items;

			},
		},
		methods: {
			onGetUserName(item) {
				switch (this.source) {
					case "msglist":
						if (item.ID != JSON.parse(uni.getStorageSync("userLoginData")).UserID) {
							uni.setStorageSync("fromUserName", item.UserName);
							// 返回列表页面
							let url = './MsgList?ConnUserId=' + item.ID;
							uni.navigateTo({
								url: url
							})
						} else {
							uni.showToast({
								icon: "none",
								title: "自己不能给自己发消息！"
							})
						}
						break;
					case "todo":
						const UserID = item.ID;
						const UserName = item.UserName;
						uni.$emit('seletedUser', {
							UserID,
							UserName
						});
						uni.navigateBack({
							delta: 1
						});
						break;
				}

			},
			getUserInfo() {
				// 准备请求数据
				let apiData = {
					url: pageApp.globalData.url + "/UserList",
					data: {
						"page": 1,
						"rows": 20
					},
					success: (d) => {
						this.items = d.data.data.items;
					}
				}
				// 发送数据请求
				this.vjAjaxData(apiData)
			}
		}
	}
</script>

<style>
	page {
		background-color: #F1F5F6;
	}

	.c-userlist-search {
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		position: relative;
	}

	.c-userlist-search icon {
		position: absolute;
		left: 52rpx;
		top: 50%;
		margin-top: -26rpx;
	}

	.c-userlist-search-txt {
		background-color: #F1F5F6;
		padding: 16rpx 30rpx 16rpx 65rpx;
		border-radius: 60rpx;
		width: 100%;
	}

	.c-userlist-search-btn {
		width: 80rpx;
		position: absolute;
		right: 20rpx;
		background-color: #007AFF;
		color: #fff;
		border-radius: 0 30rpx 30rpx 0;
		padding: 12rpx 30rpx 12rpx 50rpx;
	}

	.c-userlist-tip {
		margin-bottom: 20rpx;
		background-color: #fff;
	}

	.c-userlist-body {
		padding: 0rpx 40rpx;
		background-color: #fff;
	}

	.c-userlist-body-box {
		padding: 30rpx 20rpx;
		border-bottom: solid 2rpx #F1F5F6;
	}
</style>
